<template>
  <div class=''>
    <div>
      <el-button class="add" type="primary" @click="dialogVisible = true">
        新增
      </el-button>
    </div>
    <el-table class="form" :data="tableData" border style="width: 96%">
      <el-table-column type="selection" width="80">
      </el-table-column>
      <el-table-column prop="campusCode" align="center" label="校区代码" width="220">
      </el-table-column>
      <el-table-column prop="campusName" align="center" label="校区名称" width="220">
      </el-table-column>
      <el-table-column prop="campusAddress" align="center" label="校区地址" width="220">
      </el-table-column>
      <el-table-column prop="campusIncharge" align="center" label="校区负责人" width="220">
      </el-table-column>
      <el-table-column prop="phone" align="center" label="联系电话" width="220">
      </el-table-column>
      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">

            <el-button class="editor" type="success" icon="el-icon-edit" circle
              @click="handleEdit(scope.$index, scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)">
            </el-button>


        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="200">
    </el-pagination>
    </div>



    <!-- 新增 -->
    <el-dialog title="新增校区信息" :visible.sync="dialogVisible" height="500" width="30%" :before-close="handleClose" @close="cha()">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="校区代码" prop="campusCode">
          <el-input v-model="ruleForm.campusCode"></el-input>
        </el-form-item>
        <el-form-item label="校区名称" prop="campusName">
          <el-input v-model="ruleForm.campusName"></el-input>
        </el-form-item>
        <el-form-item label="校区地址" prop="name">
          <el-input v-model="ruleForm.campusAddress"></el-input>
        </el-form-item>
        <el-form-item label="校区负责人" prop="name">
          <el-input v-model="ruleForm.campusIncharge"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="name">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" prop="name">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao()">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>





    <!-- 修改 -->

    <el-dialog title="修改校区信息" :visible.sync="dialogVisible2" height="500" width="30%" :before-close="handleClose" @close="cha()">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="校区代码" prop="campusCode">
          <el-input v-model="ruleForm.campusCode"></el-input>
        </el-form-item>
        <el-form-item label="校区名称" prop="campusName">
          <el-input v-model="ruleForm.campusName"></el-input>
        </el-form-item>
        <el-form-item label="校区地址" prop="name">
          <el-input v-model="ruleForm.campusAddress"></el-input>
        </el-form-item>
        <el-form-item label="校区负责人" prop="name">
          <el-input v-model="ruleForm.campusIncharge"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="name">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" prop="name">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao2()">取 消</el-button>
        <el-button type="primary" @click="update('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [{
        campusCode: '111',
        campusName: '11',
        campusAddress: '11',
        campusIncharge: '11',
        phone: '11',
      }],
      dialogVisible: false,
      dialogVisible2: false,
      ruleForm: {
        campusCode: '',
        campusName: '',
        campusAddress: '',
        campusIncharge: '',
        phone: '',
        email: '',
      },
      rules: {
        campusCode: [
          { required: true, message: '请输入代码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        campusName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleEdit() {
      this.dialogVisible2 = true;
    },
    add(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {

          this.dialogVisible = false;
          this.ruleForm = { brand_right: 0 }
          this.$refs.ruleForm.resetFields();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    update(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {

          this.dialogVisible2 = false;
          this.ruleForm = { brand_right: 0 }
          this.$refs.ruleForm.resetFields();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    quxiao() {
      this.dialogVisible = false;
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
    quxiao2() {
      this.dialogVisible2 = false;
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
    cha(){
      this.ruleForm = { brand_right: 0 }
      this.$refs.ruleForm.resetFields();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类

.add {
  margin-top: 20px;
  width: 85px;
  height: 34px;
  margin-left: 30px;
}

.form {
  margin-left: 30px;
  margin-top: 20px;
}

.editor {
  margin-left: 5px;
}


.el-input {
  width: 310px;
  margin-top: 3px;
  margin-left: 5px;
}

.el-pagination {
  margin-top: 25px;
  float:right;
}
.pagination{
  width: 96%;
  height: 80px;
  background-color: #fff;
  margin-left: 30px;
}
</style>
